<!--
 * @description: 
 * @Author: FengKongLi
 * @Date: 2022-08-01 09:19:14
 * @LastEditors: FengKongLi
 * @LastEditTime: 2022-09-22 09:22:39
-->
<template>
  <div class="container">
    <div id="cesiumContainer">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "SecenView",
  data() {
    return {
      viewer: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3NTRlZTllYi0zMjQ3LTRjYzItOGViOS1kYmVjNjAyOTA5ODEiLCJpZCI6OTk0NTAsImlhdCI6MTY1NjQ5NTE4Nn0.BeOLKnxflcj0ztuG4RYdvR8xbXGV7cfEZQWq8Hu7Epw";
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, //是否显示动画控件
        timeline: false, //是否显示时间线控件
        // fullscreenButton: false, //全屏按钮
        // sceneModePicker: false, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        // 设置自动循环，在使用czml数据加载小汽车动态数据时使用到
        shouldAnimate: true,
        navigation: false,
        // 右上角弹出的信息框
        // infoBox:false,
      });
      //   去掉版权信息
      this.viewer._cesiumWidget._creditContainer.style.display = "none";
      // 控制球体是否显示
      this.viewer.scene.globe.show = true;
      this.$emit("already", this.viewer);
    },
  },
};
</script>
<style lang="scss" scoped>
#cesiumContainer {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0px;
  overflow: hidden;
}
</style>
